<template>
  <view class="index" :style="{overflow:'hidden',height:pageHeight}">
    <!-- 搜索 -->
    <search @search="disScroll" />
    <!-- 轮播图 -->
    <view class="slider">
      <swiper
        autoplay
        interval="2000"
        circular
        indicator-dots
        indicator-color="rgba(255,255,255,1)"
        indicator-active-color="rgba(255,255,255,.6)"
      >
        <swiper-item :key="item.goods_id" v-for="item in swiper">
          <navigator :open-type="item.open_type" :url="'/packone/goods/index?id='+item.goods_id">
            <image :src="item.image_src" />
          </navigator>
        </swiper-item>
      </swiper>
    </view>
    <!-- 功能导航 -->
    <view class="navs">
      <navigator
        :open-type="item.open_type?item.open_type:'navigate'"
        :url="i===0?'/pages/category/index':'/packone/list/index?query='+item.name"
        :key="item.image_src"
        v-for="(item,i) in navs"
      >
        <image :src="item.image_src" />
      </navigator>
    </view>
    <!-- 栏目楼层 -->
    <view class="floors">
      <!-- 遍历楼层 -->
      <view class="floor" :key="item.floor_title.name" v-for="item in floors">
        <!-- title -->
        <view class="ftitle">
          <image :src="item.floor_title.image_src" />
        </view>
        <!-- pics -->
        <!-- 楼层下的产品 -->
        <view class="fitem">
          <!-- 遍历楼层下的商品 -->
          <navigator
            :url="'/packone/list/index?query=' +prd.name"
            :key="prd.name"
            v-for="prd in item.product_list"
          >
            <image :src="prd.image_src" />
          </navigator>
        </view>
      </view>
    </view>
    <!-- 底部提示 -->
    <view class="end">
      <text>我是有底线的！</text>
    </view>
    <!-- 回到顶部 -->
    <view @click="goTop" v-if="isShowTop" class="goTop icon-top"></view>
  </view>
</template>

<script>
// 导入组件
import search from "@/components/search"
// import request from '@/utils/request'
export default {
  data () {
    return {
      pageHeight: "auto",
      // 轮播图
      swiper: [],
      // 导航栏
      navs: [],
      // 栏目楼层
      floors: [],
      // 页面滚动高度=》条件：页面滚动高度>半屏高度=》显示回到顶部按钮
      scrollTop: 0
    }
  },
  computed: {
    // 是否显示回到顶部按钮
    isShowTop () {
      return this.scrollTop > this.wh
    }
  },
  // 注册组件
  components: {
    search
  },
  onLoad () {
    this.getSwiper()
    this.getNavs()
    this.getFloors()
    // js方式刷新页面
    // 开启下拉刷新
    // uni.startPullDownRefresh()
    // 获取屏幕数据=>回顶按钮显示的条件
    // 存储到组件实例上
    this.wh = uni.getSystemInfoSync().windowHeight / 2
  },
  // 页面触底触发
  onReachBottom () {
    console.log('页面滚动到底部了...')
  },
  // 页面滚动触发
  onPageScroll (e) {
    // console.log(e)
    this.scrollTop = e.scrollTop
  },
  // onReady () {
  //   // 关闭下拉刷新(需要手动关闭)
  //   uni.stopPullDownRefresh()
  // },
  // 下拉刷新时会触发
  onPullDownRefresh () {
    console.log('下拉刷新了！')
    // 重新发送ajax请求=>获取响应数据=》刷新了页面
    // this.getSwiper()
    // this.getNavs()
    // this.getFloors()
    // 执行多个异步任务并发运行=》等到所有异步任务完成后=》获取所有结果
    Promise.all([this.getSwiper(), this.getNavs(), this.getFloors()]).then((res) => {
      console.log(res)
      // 关闭loading效果
      uni.stopPullDownRefresh()
    })

  },
  methods: {
    // 搜索时禁止页面滚动
    disScroll (e) {
      this.pageHeight = e
    },
    // 回到顶部
    goTop () {
      uni.pageScrollTo({
        scrollTop: 0
      })
    },
    // 获取轮播图数据
    async getSwiper () {
      const { msg, data } = await this.request({
        url: '/home/swiperdata',
      })
      if (msg.status === 200) {
        console.log('swiper:', data)
        this.swiper = data
        return data
      }
    },
    // 获取功能导航数据
    async getNavs () {
      const { msg, data } = await this.request({ url: '/home/catitems' })
      console.log(msg, data)
      if (msg.status === 200) {
        this.navs = data
        return 1009
      }
    },
    // 获取楼层数据
    async getFloors () {
      const { msg, data } = await this.request({ url: '/home/floordata' })
      console.log('楼层：', msg, data)
      if (msg.status === 200) {
        this.floors = data
      }
    }
  }
};
</script>

<style lang="scss">
.index {
  // 轮播
  .slider {
    swiper,
    image {
      width: 750rpx;
      height: 340rpx;
    }
  }
  // 功能导航
  .navs {
    display: flex;
    padding: 30rpx;
    background: #fff;
    justify-content: space-between;
    navigator {
      width: 128rpx;
      height: 140rpx;
    }
  }

  // 栏目楼层
  .floor {
    .ftitle {
      padding-top: 30rpx;
      background: #f4f4f4;
      image {
        width: 750rpx;
        height: 60rpx;
      }
    }
    // pics
    .fitem {
      padding: 20rpx 16rpx 10rpx;
      overflow: hidden;
      navigator {
        float: left;
        width: 193rpx;
        height: 188rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
      }
      navigator:nth-child(1) {
        width: 232rpx;
        height: 386rpx;
        margin-left: 0;
      }
      navigator:nth-child(2),
      navigator:nth-child(5) {
        width: 273rpx;
        height: 188rpx;
      }
    }
    &:first-child {
      .fitem {
        navigator {
          width: 233rpx;
        }
      }
    }
  }
  .end {
    text-align: center;
    font-size: 24rpx;
    color: #999;
  }
  .goTop {
    position: fixed;
    bottom: 30rpx;
    /* #ifdef H5 */
    bottom: 65px;
    /* #endif */
    right: 30rpx;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
    font-size: 48rpx;
    color: #666;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }
}
</style>
